<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useGetBusinessLicense, useSyncLicense } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import { useMessage } from '@fl/hooks/web/use-message'
import { cloneDeep } from 'lodash-es'

import Detail from './detail.vue'

const id = ref('')
const visible = ref(false)
const { createMessage } = useMessage()

const initialState = {
    name: '',
}
const state = ref<FieldValues>(cloneDeep(initialState))

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

const params = computed(() => ({
    page: tablePage.value.currentPage,
    size: tablePage.value.pageSize,
    ...state.value,
}))

const records = ref()
const { data: tableData, isLoading } = useGetBusinessLicense(params)

const { isPending, mutate } = useSyncLicense()
const isTableLoading = computed(() => isLoading.value || isPending.value)
const columns: PlusColumn[] = [
    {
        colProps: {
            span: 8,
        },
        label: '企业名称',
        prop: 'name',
    },

]

const gridOptions = reactive<VxeGridProps>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'name', title: '公司名称' },
        { field: 'unifiedSocialCreditCode', title: '社会信用代码' },
        { field: 'legalRepresentative', title: '法定代表人' },
        { field: 'establishmenDate', title: '成立日期' },
        { field: 'businessPeriod', title: '营业期限' },
        { field: 'registeredCapital', title: '注册资本' },
        { field: 'businessStatus', title: '状态' },
        { field: 'type', title: '类型' },
        { slots: { default: 'operate' }, title: '操作' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 500,
    keepSource: true,
    showOverflow: true,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

watchEffect(() => {
    if (tableData.value) {
        records.value = cloneDeep(tableData.value.records)
        tablePage.value.total = tableData.value.total ?? 0
    }
})

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

function search(values: FieldValues) {
    tablePage.value = cloneDeep(initialPage)
    state.value = values
}
function reset() {
    state.value = cloneDeep(initialState)
    tablePage.value = cloneDeep(initialPage)
}

function syncInfo(id: string) {
    mutate(
        id,
        {
            onError(error) {
                console.log('🚀 ~ onError ~ error:', error)
            },
            onSuccess: () => {
                createMessage.success('同步信息成功')
            },
        },
    )
}

function detail(row: any) {
    console.log(row, 'row')
    id.value = row
    visible.value = true
}
</script>

<template>
    <ElCard shadow="never">
        <div class="mb-20 text-16 font-700">
            企业营业执照管理
        </div>

        <SearchTable v-bind="gridOptions"
                     v-model:pager="tablePage"
                     :loading="isTableLoading"
                     :data="records"
                     row-class-name="table-row-style"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <div class="w-full">
                    <SearchForm v-bind="state"
                                :columns="columns"
                                submit-text="查询"
                                @submit="search"
                                @reset="reset"
                    />
                </div>
            </template>

            <template #operate="{ row }">
                <span class="text-#409EFF cursor-pointer"
                      @click="syncInfo(row.id)"
                >
                    同步
                </span>

                <span class="text-#409EFF cursor-pointer"
                      @click="detail(row.id)"
                >
                    详情
                </span>
            </template>
        </SearchTable>

        <Detail :key="id"
                v-model:id="id"
                v-model:visible="visible"
        />
    </ElCard>
</template>
